<template>
	<div class="x-dooritem">
		<vue-scroll :class-option="optionSetting" class="scroll-ctx" :data="listData">
			<ul class="ctx-item">
				<li @click="onRowClick(item)" v-for="(item, index) in listData" class="item-li" :key="index">
					<div style="display:flex;">
						<div class="ctx-pic" style="cursor: pointer;" @click="picshow(item.pic)">
							<img class="pic" :src="item.pic |filterimgsrc" />
						</div>
						<div style="text-align:left;">
              <div class="ctx-txt">姓名：{{ item.name }}</div>
							<div class="ctx-txt">证件号：<div class="bottom_dashed" @click="showdangan(item.idNum)">{{ new String().hideidCard(item.idNum) }}</div></div>
							<div class="ctx-txt">时间：{{ new Date().dateFtt(item.eventTime) }}</div>
							<div class="ctx-txt">位置：{{ item.gateName }}</div>
							<div class="ctx-txt">类型：{{ item.gateType }}</div>
              <div class="ctx-txt">住址：{{ item.unitNo?item.unitNo+"号楼"+item.houseNo+"室":'' }}</div>
						</div>
					</div>
				</li>
			</ul>
		</vue-scroll>
		<!-- <div v-for="item in listData" :key="item.id" class="item">
      <div>姓名：{{ item.name }}</div>
      <div>证件号：{{ item.idNum }}</div>
      <div>时间：{{ item.startTime.replace("T", " ").substr(0, 19) }}</div>
      <div>房号：{{ item.roomNum }}</div>
      <div>类型：{{ item.type }}</div>
    </div>-->
     	<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" >
			<div style="height:432px;margin:auto">
				<img :src="picurl |filterimgsrc" alt style="height:100%" />
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import request from "@/utils/request";
	import VueScroll from "vue-seamless-scroll";
	export default {
		name: "xdooritem",
		data() {
			return {
        timer: null,
        dialogVisible: false,
        picurl:"",
				listData: [
					// {
					//   id: 1,
					//   url: require("@/assets/images/test/car1.jpg")
					// },
					// {
					//   id: 2,
					//   url: require("@/assets/images/test/car2.jpg")
					// },
					// {
					//   id: 3,
					//   url: require("@/assets/images/test/car3.jpg")
					// },
					// {
					//   id: 4,
					//   url: require("@/assets/images/test/car4.jpg")
					// }
				]
			};
    },


		computed: {
			optionSetting() {
				return {
					step: 0.4, // 数值越大速度滚动越快

					limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length

					hoverStop: true, // 是否开启鼠标悬停stop

					direction: 1, // 0向下 1向上 2向左 3向右

					openWatch: true, // 开启数据实时监控刷新dom

					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

					waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
				};
			}
		},
		components: {
			VueScroll
		},
		mounted() {
       this.getData();
      if(this.timer){
        clearInterval(this.timer)
      }else{
        this.timer=setInterval(()=>{
          console.log('get')
          this.getData();
        },18000000)
      }


    },
    destroyed(){
      console.log('destroyed')
      clearInterval(this.timer)
    },
		methods: {
      picshow (url) {
      this.dialogVisible = !this.dialogVisible
      this.picurl = url
      },
			change() {
				//change、paly表格数据动态滚动
				this.listData.push(this.listData[0]); //把第一条数据插入数组最有一条
				this.listData.shift(); //删除数组中第一条数据
			},
			play() {
				this.timer = setInterval(this.change, 2000); //每两秒执行一次插入删除操作
			},
			stop() {
				clearInterval(this.timer);
			},
			destroyed() {
				clearTimeout(this.timer);
			},
			async getData() {
				// let res = await request.get(
				//   "/api/mapDateInfo/getGatePersonByPlaceId?placeId=" +
				//     this.$storage.get("place").leader
				// );
				// console.log(res);

				// this.listData = res.data;
				// this.stop();
				// this.play();
				try {
					let reportList = await request.get(
						"/api/mapDateInfo/getGatePersonByPlaceId?placeId=" +
						this.$storage.get("place").leader
					);
					// console.log(JSON.stringify(reportList.data));
					this.listData = reportList.data;
					if (this.listData.length > 0) {
						// this.play();
					}
				} catch (error) {
					console.log(error);
				}
      },
      showdangan(id){
        if(id){
          this.$emit('showdangan',id)
        }
      }
		}
	};
</script>
<style lang="less" scoped>
	&.scroll-h {
		height: calc(100% - 28px);
	}

	.x-dooritem {
		width: 100%;
		height: 100%;
		padding: 0 18px;
		box-sizing: border-box;

		.scroll-ctx {
			width: 100%;
			height: 100%;
			overflow: hidden;

			&.scroll-h {
				height: calc(100% - 28px);
			}

			.ctx-item {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				list-style: none;

				.item-li {
					width: 100%;
					height: 120px;
					padding: 10px 5px;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					align-content: center;
					font-size: 14px;

					.ctx-pic {
						width: 140px;
						height: 108px;

						.pic {
							width: 100%;
							height: 100%;
						}
					}

					.ctx-txt {
						width: 250px;
						padding-left: 15px;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: normal;
						color: #fff;

						.name {
							width: 100%;
							text-align: left;
						}

						.time {
							text-align: left;
							margin-top: 8px;
						}
					}
				}
			}
		}

		.camera-ctx {
			width: 100%;
			height: 140px;
			padding: 10px 10px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			align-content: center;
			font-size: 14px;

			.ctx-pic {
				width: 192px;
				height: 108px;

				.pic {
					// width: 100%;
					height: 100%;
				}
			}

			.ctx-txt {
				width: 250px;
				padding-left: 15px;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: normal;
				color: #fff;

				.name {
					width: 100%;
					// font-size: 0.7rem;
					text-align: left;
				}

				.time {
					text-align: left;
					// font-size: 0.6rem;
					margin-top: 8px;
				}
			}
		}

		.scroll {
			width: 100%;
			height: 100%;
			overflow: hidden;

			.animatedTop {
				transition: all 0.5s linear;
			}
		}
  }
  .bottom_dashed{
    border-bottom:1px dashed #fff;
    cursor: pointer;
    display:inline-block;
  }
</style>
